<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>微信抽奖大转盘</title>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        a, img {
            border: 0;
        }

        body {
            font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
        }

        .rotary {
            position: relative;
            width: 854px;
            height: 504px;
            margin: 50px auto 0 auto;
            background: #d71f2e url(/wechat/choujiang/images/bg1.png);
        }

        .rotaryArrow {
            position: absolute;
            left: 181px;
            top: 104px;
            width: 294px;
            height: 294px;
            cursor: pointer;
            background-image: url(/wechat/choujiang/images/arrow.png);
        }

        .list {
            position: absolute;
            right: 48px;
            top: 144px;
            width: 120px;
            height: 320px;
            overflow: hidden;
        }

        .list h3 {
            display: none;
        }

        .list li {
            height: 37px;
            font: 14px/37px "Microsoft Yahei";
            color: #ffea76;
            text-indent: 25px;
            background: url(/wechat/choujiang/images/user.png) 0 no-repeat;
        }

        .result {
            display: none;
            position: absolute;
            left: 130px;
            top: 190px;
            width: 395px;
            height: 118px;
            background-color: rgba(0, 0, 0, 0.75);
            filter: alpha(opacity=90);
        }

        .result a {
            position: absolute;
            right: 5px;
            top: 5px;
            width: 25px;
            height: 25px;
            text-indent: -100px;
            background-image: url(/wechat/choujiang/images/close.png);
            overflow: hidden;
        }

        .result p {
            padding: 45px 15px 0;
            font: 16px "Microsoft Yahei";
            color: #fff;
            text-align: center;
        }

        .result em {
            color: #ffea76;
            font-style: normal;
        }
    </style>

</head>

<body>

<!-- Demo start  -->
<div class="rotary">
    <div class="rotaryArrow" id="rotaryArrow"></div>
    <div class="list">
        <h3>中奖名单</h3>
        <ul>
            @foreach($draws as $draw)
                <li>{{substr_replace($draw->customers->tel,'****',3,4)}}</li>
            @endforeach
        </ul>
    </div>
    <div class="result" id="result">
        <p id="resultTxt"></p>
        <a href="javascript:" id="resultBtn" title="关闭">关闭</a>
    </div>
</div>


<script type="text/javascript" src="/wechat/choujiang/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/wechat/choujiang/js/jquery.rotate.min.js"></script>
<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
</script>
<script type="text/javascript">
    $(function () {
        $('#rotaryArrow').click(function () {
            $.ajax({
                type: 'POST',
                url: '/draw/store',
                success: function (data) {
                    // console.log(data);

                    switch (data.data.id) {
                        case 6:
                            rotateFunc(1, 87, data.data.name);
                            break;
                        case 5:
                            rotateFunc(2, 43, data.data.name);
                            break;
                        case 4:
                            rotateFunc(3, 134, data.data.name);
                            break;
                        case 8:
                            rotateFunc(4, 177, data.data.name);
                            break;
                        case 3:
                            rotateFunc(5, 223, data.data.name);
                            break;
                        case 1:
                            rotateFunc(6, 268, data.data.name);
                            break;
                        case 2:
                            rotateFunc(7, 316, data.data.name);
                            break;
                        default:
                            rotateFunc(0, 0, '很遗憾，这次您未抽中奖，继续加油吧');
                    }
                }
            })

        });

        var rotateFunc = function (awards, angle, text) {  //awards:奖项，angle:奖项对应的角度
            $('#rotaryArrow').stopRotate();
            $('#rotaryArrow').rotate({
                angle: 0,
                duration: 5000,
                animateTo: angle + 1440,  //angle是图片上各奖项对应的角度，1440是让指针固定旋转4圈
                callback: function () {
                    $('#resultTxt').html(text);
                    $('#result').show();
                }
            });
        };

        $('#result').click(function () {
            $('#result').hide();
        });
    });
</script>
</body>
</html>